<!--输入框删选商品-->
<template>
    <div class="product_filter">
        <el-form ref="form" label-width="8em" :inline="true">
            <el-form-item label="商品名称">
                <el-input placeholder="请输入商品名称" v-model="nameLike"
                          style="width: 325px;"></el-input>
            </el-form-item>

            <el-form-item label="商品类目">
                <el-select v-model="categoryId" placeholder="请选择类目1"
                           @change="handleChange" style="width: 325px;">
                    <el-option v-for="item in category" :key="item.value" :label="item.label"
                               :value="item.value" :disabled="!item.disabled"></el-option>
                </el-select>

                <el-select v-model="typeId" placeholder="请选择类目2" style="width: 325px;">
                    <el-option v-for="item in type" :key="item.value" :label="item.label"
                               :value="item.value" :disabled="!item.disabled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="租金">
                <div style="width: 325px;">
                    <el-input placeholder="0" v-model="moneyFrom" style="width:150px; "></el-input>
                    到
                    <el-input placeholder="0" v-model="moneyTo" style="width:150px;"></el-input>
                </div>
            </el-form-item>
            <br>
            <el-form-item :label="status+'时间'">
                <el-date-picker v-model="timeRange" type="datetimerange" :picker-options="pickerOptions2"
                                placeholder="选择时间范围"
                                style="width: 325px;">
                </el-date-picker>
            </el-form-item>

            <br>
            <el-form-item label="商品状态" v-if="status=='退回'">
                <el-select v-model="productStatus" placeholder="请选择" style="width: 325px;" @change="handleStatusChange">
                    <el-option label="审核不通过" value="CHECK_FAILURE"></el-option>
                    <el-option label="撤回审核" value="CHECK_WITHDRAWAL"></el-option>
                    <el-option label="主动删除" value="DELETED"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item class="editBtn">
                <el-button type="primary" @click="getTableData">搜索</el-button>
                <el-button @click="clearInput">重置</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
    import {getGoodsListByParams} from '@/api/goods';
    import {getSecCategory,getFirCategory} from '@/api/category';
    export default {
        name: 'productFilter',
        props: {
            status: {
                type: String,
                dafault: ''
            }
        },
        data() {
            return {
                loading:false,
                type: [],
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                categoryId: '',
                typeId: '',
//                innerCategoryId: '1',
                productStatus: '',
                timeRange: [],
//        搜索的数据
//                status: this.status,
                nameLike: '',
                moneyFrom: 0,
                moneyTo: 0,
                category:[]
            }
        },
        mounted() {
            this.getCategory();
        },
        methods: {
            getCategory() {
                getFirCategory()
                    .then((resp) => {
                        this.category=[];
//                    console.log(resp);
                        for (let item of resp.data.list) {
                            let tmp = {
                                value: item.id,
                                label: item.name,
                                disabled: item.enabled
                            };
                            this.category.push(tmp);
                        }
//                        console.log(this.category)
                    })
                    .catch((err) => {
//                        console.log(err)
                    })
            },
            handleChange(value) {
                this.typeId='';
//                console.log(value);
                if(value){
                    getSecCategory(value)
                        .then((resp) => {
                            this.type=[];
                            let list = resp.data.list || [];
                            list.forEach(item=>{
                                let tmp = {
                                    value: item.id,
                                    label: item.name,
                                    disabled: item.enabled,
                                };
                                this.type.push(tmp);
                            });
                        }).catch((err) => {

                    })
                }

            },
            clearInput() {
//        清除输入的数据
                this.nameLike = '';
                this.categoryId = '';
                this.typeId = '';
                this.moneyFrom = '';
                this.moneyTo = '';
                this.timeRange = [];
                if(this.productStatus){
                    this.productStatus='';
                }
                sessionStorage.removeItem('QUERY_PARAMS');
            },
            getTableData() {
                this.$emit('search');
                let data = null;
                let time = null;
//        将收集到的数据发送请求 得到table 渲染的数据 ，赋值，然后进行$emit
//                console.log(Date.parse(new Date(this.timeRange[0])))//13位
                let queryParams = {
                    nameLike: this.nameLike,
                    categoryId: this.categoryId,
                    typeId: this.typeId,
                    rentFrom: this.moneyFrom?this.moneyFrom*100:'',
                    rentTo: this.moneyTo?this.moneyTo*100:'',
//                    innerCategoryId: this.innerCategoryId
                    desc:true
//        this.levelChoose
                };
                sessionStorage.setItem('QUERY_PARAMS',JSON.stringify(queryParams));
                if (this.status == '发布') {
                    data = {status: 'IN_STORAGE',orderBy:'check_finish_time'};
                    time = {
                        checkFinishStartTime: this.timeRange[0] ? Date.parse(new Date(this.timeRange[0])) : 0,
                        checkFinishEndTime: this.timeRange[1] ? Date.parse(new Date(this.timeRange[1])) : 0
                    }
                } else if (this.status == '提交审核') {
                    data = {status: 'CHECK_PENDING',orderBy:'check_submit_time'};
                    time = {
                        checkSubmitStartTime: this.timeRange[0] ? Date.parse(new Date(this.timeRange[0])) : 0,
                        checkSubmitEndTime: this.timeRange[1] ? Date.parse(new Date(this.timeRange[1])) : 0
                    }
                } else if (this.status == '退回') {
                    if (this.productStatus) {
//                        如果存在
                        data = {status: this.productStatus,orderBy:'return_time'};
                    } else {
                        data = {status: 'CHECK_RECYCLE',orderBy:'return_time'};
                    }

                    time = {
                        returnStartTime: this.timeRange[0] ? Date.parse(new Date(this.timeRange[0])) : 0,
                        returnEndTime: this.timeRange[1] ? Date.parse(new Date(this.timeRange[1])) : 0
                    }
                } else {
                    data = {status: 'PUTAWAY',orderBy:'putaway_time'};
                    time = {
                        putawayStartTime: this.timeRange[0] ? Date.parse(new Date(this.timeRange[0])) : 0,
                        putawayEndTime: this.timeRange[1] ? Date.parse(new Date(this.timeRange[1])) : 0
                    }
                }
//                console.log(Object.assign({}, data, queryParams, time,{pageSize:5,pageNum:1}));

                getGoodsListByParams(Object.assign({},data,{pageSize:5}), queryParams, time)
                    .then((resp) => {
//                        console.log(1);
//                        console.log(resp);
                        this.$root.eventHub.$emit("get-filter-date", resp);

//                            this.$emit('get-list',resp.data,list)
                    }).catch((err) => {
//                    console.log(err);

                })
            },
            handleStatusChange(val) {
//                console.log(this.productStatus);
            }
        }
    }
</script>
<style lang="less" scoped>
    .product_filter {
        .editBtn {
            display: block;
            text-align: center;
            margin-top: 24px;
            .el-button {
                margin-left: 40px;
            }
        }
    }

</style>
